import React from 'react';
import classnames from 'classnames';
import DocumentTitle from 'react-document-title';
import {ContainerQuery} from 'react-container-query';
import {connect} from 'dva';
import {routerRedux, Route, Redirect, Switch} from 'dva/router';
import {Layout, BackTop} from 'antd';
import CSider from './CSider';
import CHeader from './CHeader';
import CFooter from './CFooter';
import CBreadcrumb from './CBreadcrumb';
import NotFound from '../exception/404';
import {getLocalStorage} from '../../utils/storagehelper';
import {name, mainLayoutLinks} from "../../config/config";
import {getPageTitle} from '../../utils/utils';
import styles from './MainLayout.less'

const {Content} = Layout;

const query = {
  'screen-xs': {
    maxWidth: 575,
  },
  'screen-sm': {
    minWidth: 576,
    maxWidth: 767,
  },
  'screen-md': {
    minWidth: 768,
    maxWidth: 991,
  },
  'screen-lg': {
    minWidth: 992,
    maxWidth: 1199,
  },
  'screen-xl': {
    minWidth: 1200,
  },
};

@connect(state => ({
  global: state.global,
}))
export default class MainLayout extends React.PureComponent {

  constructor(props) {
    super(props);

    // TODO 权限
    this.state = {
      currentUser: getLocalStorage('current_user') || undefined,
      // mainNavList: getLocalStorage('current_user') ? props.mainNavList.filter(item => getLocalStorage('current_user').menus.indexOf(item.id) > -1) : [],
      mainNavList: getLocalStorage('current_user') ? props.mainNavList : [],
    };
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const currentUser = getLocalStorage('current_user');
    if (!currentUser) {
      this.props.dispatch(routerRedux.push('/users_login'));
    }
  }

  componentDidMount() {
    //
  }

  componentWillUnmount() {
    // this.triggerResizeEvent.cancel();
  }

  render() {
    const {location, dispatch, global: {collapsed, lightTheme, fetchingNotices, notices, settingModalVisable}} = this.props;
    const {currentUser, mainNavList} = this.state;
    const pathname = location.pathname;
    const siderProps = {
      location,
      dispatch,
      lightTheme,
      collapsed,
      mainNavList,
    };
    const headerProps = {
      dispatch,
      currentUser,
      lightTheme,
      collapsed,
      notifyCount: 12,
      fetchingNotices,
      notices,
      settingModalVisable,
    };
    const breadcrumbProps = {
      location,
      mainNavList,
    };

    return (
      <DocumentTitle title={getPageTitle(name, mainNavList, pathname)}>
        <ContainerQuery query={query}>
          {params => <div className={classnames(params)}>
            <Layout>
              <BackTop/>
              <CSider {...siderProps}/>
              <Layout className={collapsed ? styles.marginLefCollapsed : styles.marginLeft}>
                <CHeader {...headerProps} />
                <Content className={styles.content}>
                  <CBreadcrumb {...breadcrumbProps} />
                  <Switch>
                    {mainNavList && mainNavList.map(item => {
                      if (item.path) {
                        return <Route
                          exact={item.exact}
                          key={item.id}
                          path={item.path}
                          component={item.component}
                        />;
                      }
                      return false;
                    })}
                    <Redirect exact from="/" to="/dashboard"/>
                    <Route component={NotFound}/>
                  </Switch>
                </Content>
                <CFooter
                  links={mainLayoutLinks}
                />
              </Layout>
            </Layout>
          </div>}
        </ContainerQuery>
      </DocumentTitle>
    );
  }
}
